<template>
  <div class="app-container history-container">
    <!-- 标题区域 -->
    <el-row class="page-header">
      <div class="header-content">
        <h1 class="page-title">识别历史记录</h1>
        <p class="page-subtitle">每一次识别，都是AI与农业智慧的碰撞</p>
        <div class="header-glow"></div>
      </div>
    </el-row>

    <!-- 搜索区域 -->
    <el-row class="search-section">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="病虫害名称" prop="mainDisease">
          <el-input
            v-model="queryParams.mainDisease"
            placeholder="请输入病虫害名称"
            clearable
            class="search-input"
            @keyup.enter.native="handleQuery"
          >
            <i slot="prefix" class="el-icon-search search-icon"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="glow-button" icon="el-icon-search" size="mini" @click="handleQuery">
            <span class="button-text">搜索</span>
          </el-button>
          <el-button class="reset-button" icon="el-icon-refresh" size="mini" @click="resetQuery">
            <span class="button-text">重置</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <!-- 操作按钮区域 -->
    <el-row :gutter="10" class="action-section">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          class="action-btn add-btn"
          @click="handleAdd"
          v-hasPermi="['insect:record:add']"
        >
          <span class="button-text">新增</span>
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          class="action-btn edit-btn"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['insect:record:edit']"
        >
          <span class="button-text">修改</span>
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          class="action-btn delete-btn"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['insect:record:remove']"
        >
          <span class="button-text">删除</span>
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          class="action-btn export-btn"
          @click="handleExport"
          v-hasPermi="['insect:record:export']"
        >
          <span class="button-text">导出</span>
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 数据表格区域 -->
    <el-row class="table-section">
      <el-table
        v-loading="loading"
        :data="recordList"
        @selection-change="handleSelectionChange"
        class="history-table"
        :header-cell-style="headerCellStyle"
        :cell-style="cellStyle"
        style="width: 100%"
        :row-style="rowStyle"
      >
        <el-table-column type="selection" width="55" align="center" fixed="left" />
        <el-table-column label="ID" align="center" prop="id" width="80" fixed="left">
          <template slot-scope="scope">
            <span class="id-cell">{{ scope.row.id }}</span>
          </template>
        </el-table-column>

        <!-- 主要信息列 - 占据更多空间 -->
        <el-table-column label="主要病虫害" align="center" prop="mainDisease" min-width="200">
          <template slot-scope="scope">
            <div class="disease-cell">
              <i class="el-icon-orange disease-icon"></i>
              <span class="disease-name">{{ scope.row.mainDisease || '未识别' }}</span>
              <div v-if="scope.row.mainDisease" class="disease-tag">
                <el-tag
                  size="small"
                  :type="getDiseaseTagType(scope.row.mainDisease)"
                  effect="plain"
                >
                  {{ scope.row.mainDisease }}
                </el-tag>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="置信度" align="center" prop="confidence" min-width="150">
          <template slot-scope="scope">
            <div class="confidence-cell">
              <div class="confidence-display">
                <div class="confidence-bar">
                  <div
                    class="confidence-fill"
                    :style="{ width: (scope.row.confidence * 100) + '%' }"
                    :class="getConfidenceClass(scope.row.confidence)"
                  ></div>
                </div>
                <span class="confidence-value">
                  {{ scope.row.confidence ? (scope.row.confidence * 100).toFixed(1) + '%' : '-' }}
                </span>
              </div>
              <div class="confidence-badge" :class="getConfidenceClass(scope.row.confidence)">
                {{ getConfidenceText(scope.row.confidence) }}
              </div>
            </div>
          </template>
        </el-table-column>

        <!-- 详细信息列 -->
        <el-table-column label="检测目标数" align="center" width="120">
          <template slot-scope="scope">
            <div class="detection-count">
              <i class="el-icon-aim count-icon"></i>
              <span class="count-value">
                {{ getDetectionCount(scope.row.predictions) }}
              </span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="识别时间" align="center" prop="recognitionTime" min-width="180">
          <template slot-scope="scope">
            <div class="time-cell">
              <div class="time-main">
                <i class="el-icon-time time-icon"></i>
                <span>{{ parseTime(scope.row.recognitionTime, '{y}-{m}-{d}') }}</span>
              </div>
              <div class="time-sub">
                {{ parseTime(scope.row.recognitionTime, '{h}:{i}:{s}') }}
              </div>
            </div>
          </template>
        </el-table-column>

        <!-- 图片预览列 -->
        <el-table-column label="识别结果" align="center" width="160">
          <template slot-scope="scope">
            <div class="image-preview-cell">
              <div class="preview-wrapper" @click="handlePreview(scope.row, 'result')">
                <div class="image-container">
                  <el-image
                    v-if="scope.row.resultImage"
                    :src="formatImageSrc(scope.row.resultImage)"
                    :preview-src-list="[formatImageSrc(scope.row.resultImage)]"
                    fit="cover"
                    class="table-image"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  <div v-else class="image-placeholder">
                    <i class="el-icon-picture-outline"></i>
                    <span>无结果图</span>
                  </div>
                  <div class="image-overlay">
                    <i class="el-icon-zoom-in"></i>
                    <span>预览</span>
                  </div>
                </div>
              </div>
              <div class="image-actions">
                <el-button
                  size="mini"
                  type="text"
                  @click="handlePreview(scope.row, 'original')"
                  class="preview-btn"
                >
                  原图
                </el-button>
              </div>
            </div>
          </template>
        </el-table-column>

        <!-- 详细信息展开 -->
        <el-table-column label="详细信息" align="center" width="120">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="toggleRowExpansion(scope.row)"
              class="detail-expand-btn"
            >
              <i class="el-icon-info"></i>
              {{ scope.row._expanded ? '收起' : '展开' }}
            </el-button>
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250" fixed="right">
          <template slot-scope="scope">
            <div class="action-buttons">
              <el-button
                size="mini"
                type="primary"
                class="action-btn view-btn"
                @click="handleView(scope.row)"
                icon="el-icon-view"
              >
                详情
              </el-button>
              <el-button
                size="mini"
                type="success"
                class="action-btn edit-btn"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['insect:record:edit']"
                icon="el-icon-edit"
              >
                修改
              </el-button>
              <el-button
                size="mini"
                type="danger"
                class="action-btn delete-btn"
                @click="handleDelete(scope.row)"
                v-hasPermi="['insect:record:remove']"
                icon="el-icon-delete"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>

        <!-- 展开行 -->
        <el-table-column type="expand" width="1">
          <template slot-scope="scope">
            <div v-if="scope.row._expanded" class="expand-row">
              <div class="expand-content">
                <div class="expand-section">
                  <h4 class="expand-title">
                    <i class="el-icon-tickets"></i>
                    检测详情
                  </h4>
                  <div class="predictions-list">
                    <div
                      v-for="(pred, index) in parsePredictions(scope.row.predictions)"
                      :key="index"
                      class="prediction-item"
                    >
                      <div class="prediction-info">
                        <span class="prediction-class">{{ pred.class || pred.class_name }}</span>
                        <span class="prediction-confidence">{{ (pred.confidence * 100).toFixed(1) }}%</span>
                      </div>
                      <div class="prediction-bbox">
                        <span class="bbox-label">位置: </span>
                        <span class="bbox-value">{{ formatBbox(pred.bbox) }}</span>
                      </div>
                    </div>
                    <div v-if="!parsePredictions(scope.row.predictions).length" class="no-predictions">
                      无检测结果
                    </div>
                  </div>
                </div>

                <div class="expand-section">
                  <h4 class="expand-title">
                    <i class="el-icon-picture"></i>
                    图片对比
                  </h4>
                  <div class="image-comparison">
                    <div class="comparison-item">
                      <div class="comparison-label">原始图片</div>
                      <div class="image-container" @click="handlePreview(scope.row, 'original')">
                        <el-image
                          v-if="scope.row.originalImage"
                          :src="formatImageSrc(scope.row.originalImage)"
                          fit="cover"
                          class="comparison-image"
                        ></el-image>
                        <div v-else class="no-image">无原图</div>
                      </div>
                    </div>
                    <div class="comparison-item">
                      <div class="comparison-label">识别结果</div>
                      <div class="image-container" @click="handlePreview(scope.row, 'result')">
                        <el-image
                          v-if="scope.row.resultImage"
                          :src="formatImageSrc(scope.row.resultImage)"
                          fit="cover"
                          class="comparison-image"
                        ></el-image>
                        <div v-else class="no-image">无结果图</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <!-- 分页组件 -->
    <el-row class="pagination-section">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        class="history-pagination"
      />
    </el-row>

    <!-- 添加或修改对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
      class="history-dialog"
      :close-on-click-modal="false"
    >
      <div class="dialog-glow"></div>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="dialog-form">
        <el-form-item label="识别结果图">
          <div class="image-upload-container">
            <el-image
              v-if="form.resultImage"
              :src="formatImageSrc(form.resultImage)"
              fit="contain"
              class="dialog-image"
            ></el-image>
            <div v-else class="upload-placeholder">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">暂无图片</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="主要病虫害" prop="mainDisease">
          <el-input v-model="form.mainDisease" placeholder="请输入主要病虫害名称" class="dialog-input" />
        </el-form-item>
        <el-form-item label="置信度" prop="confidence">
          <el-input-number
            v-model="form.confidence"
            :precision="4"
            :step="0.01"
            :min="0"
            :max="1"
            placeholder="请输入置信度"
            class="dialog-input"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="glow-button" @click="submitForm">确 定</el-button>
        <el-button class="reset-button" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog
      title="识别记录详情"
      :visible.sync="viewOpen"
      width="800px"
      append-to-body
      class="detail-dialog"
      :close-on-click-modal="false"
    >
      <div class="dialog-glow"></div>
      <el-descriptions :column="2" border class="detail-descriptions">
        <el-descriptions-item label="主要病虫害" span="2" class="detail-item">
          <span class="detail-value disease-value">{{ viewForm.mainDisease || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="置信度" class="detail-item">
          <div class="confidence-detail">
            <div class="confidence-progress">
              <div
                class="progress-bar"
                :style="{ width: (viewForm.confidence * 100) + '%' }"
                :class="getConfidenceClass(viewForm.confidence)"
              ></div>
            </div>
            <span class="confidence-value">{{ viewForm.confidence ? (viewForm.confidence * 100).toFixed(1) + '%' : '-' }}</span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="识别时间" class="detail-item">
          <div class="time-detail">
            <i class="el-icon-time"></i>
            <span>{{ parseTime(viewForm.recognitionTime) }}</span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="原始图片" span="2" class="detail-item">
          <div class="detail-image-container">
            <el-image
              v-if="viewForm.originalImage"
              :src="formatImageSrc(viewForm.originalImage)"
              :preview-src-list="[formatImageSrc(viewForm.originalImage)]"
              fit="contain"
              class="detail-image"
            ></el-image>
            <div v-else class="no-image">
              <i class="el-icon-picture-outline"></i>
              <span>无原始图片</span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="识别结果图片" span="2" class="detail-item">
          <div class="detail-image-container">
            <el-image
              v-if="viewForm.resultImage"
              :src="formatImageSrc(viewForm.resultImage)"
              :preview-src-list="[formatImageSrc(viewForm.resultImage)]"
              fit="contain"
              class="detail-image"
            ></el-image>
            <div v-else class="no-image">
              <i class="el-icon-picture-outline"></i>
              <span>无识别结果图片</span></div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="识别详情" span="2" v-if="viewForm.predictions" class="detail-item">
          <el-table
            :data="parsePredictions(viewForm.predictions)"
            size="small"
            style="width: 100%"
            max-height="200"
            class="predictions-table"
          >
            <el-table-column prop="class" label="病虫害名称" width="150">
              <template slot-scope="{row}">
                <span class="prediction-class">{{ row.class }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="confidence" label="置信度" width="120">
              <template slot-scope="{row}">
                <div class="prediction-confidence">
                  {{ (row.confidence * 100).toFixed(2) }}%
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="bbox" label="位置坐标">
              <template slot-scope="{row}">
                <span class="prediction-bbox">{{ formatBbox(row.bbox) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button class="glow-button" @click="viewOpen = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 图片预览对话框 -->
    <el-dialog :visible.sync="previewVisible" width="60%" top="5vh" append-to-body class="preview-dialog">
      <div class="dialog-glow"></div>
      <el-image
        :src="previewImage"
        fit="contain"
        style="width: 100%; height: 70vh; border-radius: 8px;"
      ></el-image>
    </el-dialog>
  </div>
</template>

<script>
import { listRecord, getRecord, delRecord, addRecord, updateRecord } from "@/api/insect/record"

export default {
  name: "DiseaseRecord",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 历史记录表格数据
      recordList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查看详情弹出层
      viewOpen: false,
      // 图片预览
      previewVisible: false,
      previewImage: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        mainDisease: null
      },
      // 表单参数
      form: {},
      // 查看详情表单
      viewForm: {},
      // 表单校验
      rules: {
        mainDisease: [
          { required: true, message: "主要病虫害名称不能为空", trigger: "blur" }
        ]
      },
      // 展开行状态
      expandedRows: new Set()
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询历史记录列表 */
    getList() {
      this.loading = true
      listRecord(this.queryParams).then(response => {
        this.recordList = response.rows.map(record => {
          // 添加展开状态
          record._expanded = this.expandedRows.has(record.id);
          // 验证图片数据
          if (record.resultImage) {
            console.log(`记录 ${record.id} 结果图片长度:`, record.resultImage.length);
          }
          if (record.originalImage) {
            console.log(`记录 ${record.id} 原始图片长度:`, record.originalImage.length);
          }
          return record;
        });
        this.total = response.total
        this.loading = false
      }).catch(error => {
        console.error('获取列表失败:', error);
        this.loading = false
        this.$message.error('获取数据失败');
      })
    },

    // 格式化图片src - 增强错误处理
    formatImageSrc(imageData) {
      if (!imageData) {
        console.warn('图片数据为空');
        return '';
      }

      // 检查数据是否完整
      if (imageData.length < 100) {
        console.warn('图片数据可能不完整，长度:', imageData.length);
      }

      try {
        // 如果已经是完整的数据URI，直接返回
        if (imageData.startsWith('data:image/')) {
          // 验证Base64数据是否完整
          const base64Part = imageData.split(',')[1];
          if (base64Part && base64Part.length % 4 === 0) {
            return imageData;
          } else {
            console.warn('Base64数据格式不正确');
            return '';
          }
        }

        // 否则添加前缀（假设是JPEG格式）
        // 验证Base64数据格式
        if (this.isValidBase64(imageData)) {
          return `data:image/jpeg;base64,${imageData}`;
        } else {
          console.warn('无效的Base64数据');
          return '';
        }
      } catch (error) {
        console.error('格式化图片数据失败:', error);
        return '';
      }
    },

    // 验证Base64数据格式
    isValidBase64(str) {
      if (!str || typeof str !== 'string') return false;

      // 基本的Base64格式检查
      try {
        return btoa(atob(str)) === str;
      } catch (e) {
        return false;
      }
    },

    // 图片预览 - 增强错误处理
    handlePreview(row, type) {
      const imageData = type === 'result' ? row.resultImage : row.originalImage;
      if (imageData) {
        const formattedImage = this.formatImageSrc(imageData);
        if (formattedImage) {
          this.previewImage = formattedImage;
          this.previewVisible = true;
        } else {
          this.$message.error('图片数据格式错误，无法预览');
        }
      } else {
        this.$message.warning('该记录没有图片数据');
      }
    },

    // 解析预测结果
    parsePredictions(predictionsStr) {
      try {
        if (typeof predictionsStr === 'string') {
          return JSON.parse(predictionsStr);
        }
        return predictionsStr || [];
      } catch (error) {
        console.error('解析预测结果失败:', error);
        return [];
      }
    },

    // 格式化边界框
    formatBbox(bbox) {
      if (!bbox) return "";
      if (Array.isArray(bbox)) {
        return `[${bbox.join(", ")}]`;
      }
      if (typeof bbox === 'object') {
        return `[${bbox.x1}, ${bbox.y1}, ${bbox.x2}, ${bbox.y2}]`;
      }
      return bbox;
    },

    // 获取置信度样式类
    getConfidenceClass(confidence) {
      if (!confidence) return 'confidence-low';
      if (confidence >= 0.8) return 'confidence-high';
      if (confidence >= 0.6) return 'confidence-medium';
      return 'confidence-low';
    },

    // 获取置信度文本
    getConfidenceText(confidence) {
      if (!confidence) return '未知';
      if (confidence >= 0.8) return '高';
      if (confidence >= 0.6) return '中';
      return '低';
    },

    // 获取病虫害标签类型
    getDiseaseTagType(disease) {
      const criticalDiseases = ['白粉病', '炭疽病', '霜霉病', '疫病'];
      if (criticalDiseases.includes(disease)) {
        return 'danger';
      }
      return 'primary';
    },

    // 获取检测目标数
    getDetectionCount(predictions) {
      const parsed = this.parsePredictions(predictions);
      return parsed.length || 0;
    },

    // 表头样式
    headerCellStyle() {
      return {
        background: 'linear-gradient(135deg, rgba(22, 33, 62, 0.9) 0%, rgba(15, 52, 96, 0.9) 100%)',
        color: '#ffffff',
        borderBottom: '1px solid rgba(0, 255, 255, 0.2)',
        fontWeight: '600',
        fontSize: '14px',
        height: '50px'
      }
    },

    // 单元格样式
    cellStyle() {
      return {
        background: 'rgba(20, 25, 45, 0.6)',
        color: '#e0e0ff',
        borderBottom: '1px solid rgba(0, 150, 255, 0.1)',
        fontSize: '13px',
        padding: '12px 8px'
      }
    },

    // 行样式
    rowStyle() {
      return {
        height: '60px'
      }
    },

    // 切换行展开状态
    toggleRowExpansion(row) {
      row._expanded = !row._expanded;
      if (row._expanded) {
        this.expandedRows.add(row.id);
      } else {
        this.expandedRows.delete(row.id);
      }
      // 强制更新表格
      this.$forceUpdate();
    },

    // 查看详情
    handleView(row) {
      this.viewForm = { ...row };
      this.viewOpen = true;
    },

    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        resultImage: null,
        originalImage: null,
        mainDisease: null,
        confidence: null,
        predictions: null,
        recognitionTime: null
      }
      this.resetForm("form")
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加历史记录"
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getRecord(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = "修改历史记录"
      })
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateRecord(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addRecord(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除历史记录编号为"' + ids + '"的数据项？').then(function() {
        return delRecord(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('insect/record/export', {
        ...this.queryParams
      }, `record_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>

<style scoped lang="scss">
.history-container {
  padding: 20px;
  background:
    radial-gradient(ellipse at 10% 20%, rgba(0, 80, 120, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(120, 0, 80, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 40%, rgba(0, 120, 80, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, #0a0a0a 0%, #0f0f1a 30%, #0a0a14 70%, #050510 100%);
  min-height: calc(100vh - 84px);
  color: #ffffff;
  position: relative;
  overflow-x: hidden;
}

// 页面标题区域
.page-header {
  margin-bottom: 30px;
  text-align: center;
  position: relative;

  .header-content {
    padding: 40px 20px;
    background:
      radial-gradient(ellipse at center, rgba(0, 40, 80, 0.4) 0%, transparent 70%),
      linear-gradient(135deg, rgba(10, 20, 40, 0.9) 0%, rgba(5, 15, 30, 0.95) 100%);
    border-radius: 20px;
    border: 1px solid rgba(0, 255, 255, 0.1);
    box-shadow:
      0 0 50px rgba(0, 100, 255, 0.3),
      inset 0 0 50px rgba(0, 50, 100, 0.2);
    position: relative;
    overflow: hidden;

    .header-glow {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg,
        transparent,
        #00ffcc, #00ccff, #ff00cc, #00ffcc,
        transparent);
      animation: shimmer 3s infinite;
    }
  }

  .page-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #00ffcc, #00ccff, #ff00cc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
    animation: titleGlow 4s ease-in-out infinite;
  }

  .page-subtitle {
    font-size: 16px;
    color: #aaccff;
    margin: 0;
    text-shadow: 0 0 10px rgba(170, 204, 255, 0.3);
  }
}

// 搜索区域
.search-section {
  margin-bottom: 20px;
  padding: 20px;
  background: rgba(20, 25, 45, 0.6);
  border-radius: 16px;
  border: 1px solid rgba(0, 150, 255, 0.2);
  backdrop-filter: blur(10px);

  ::v-deep .el-form-item__label {
    color: #ccddff !important;
    font-weight: 600;
  }

  .search-input {
    width: 250px;

    ::v-deep .el-input__inner {
      background: rgba(15, 20, 40, 0.8);
      border: 1px solid rgba(0, 255, 255, 0.3);
      border-radius: 8px;
      color: #ffffff;
      transition: all 0.3s ease;

      &:focus {
        border-color: #00ffcc;
        box-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
      }

      &::placeholder {
        color: #8899bb;
      }
    }
  }

  .search-icon {
    color: #00ffcc;
    font-size: 16px;
  }
}

// 按钮样式
.glow-button {
  background: linear-gradient(135deg, #00ffcc, #00ccff) !important;
  border: none !important;
  color: #0a0a0a !important;
  font-weight: 600 !important;
  box-shadow: 0 0 15px rgba(0, 255, 204, 0.5) !important;
  transition: all 0.3s ease !important;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(0, 255, 204, 0.8) !important;
  }

  &:active {
    transform: translateY(0);
  }
}

.reset-button {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease !important;

  &:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px);
  }
}

.action-section {
  margin-bottom: 20px;
}

.action-btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px);

  .button-text {
    margin-left: 4px;
  }

  &.add-btn {
    background: linear-gradient(135deg, rgba(0, 255, 204, 0.2), rgba(0, 204, 255, 0.2)) !important;
    border: 1px solid rgba(0, 255, 204, 0.5) !important;
    color: #00ffcc !important;

    &:hover {
      background: linear-gradient(135deg, rgba(0, 255, 204, 0.3), rgba(0, 204, 255, 0.3)) !important;
      box-shadow: 0 0 15px rgba(0, 255, 204, 0.4) !important;
      transform: translateY(-2px);
    }
  }

  &.edit-btn {
    background: linear-gradient(135deg, rgba(0, 255, 102, 0.2), rgba(0, 204, 255, 0.2)) !important;
    border: 1px solid rgba(0, 255, 102, 0.5) !important;
    color: #00ff66 !important;

    &:hover {
      background: linear-gradient(135deg, rgba(0, 255, 102, 0.3), rgba(0, 204, 255, 0.3)) !important;
      box-shadow: 0 0 15px rgba(0, 255, 102, 0.4) !important;
      transform: translateY(-2px);
    }
  }

  &.delete-btn {
    background: linear-gradient(135deg, rgba(255, 0, 102, 0.2), rgba(255, 0, 204, 0.2)) !important;
    border: 1px solid rgba(255, 0, 102, 0.5) !important;
    color: #ff0066 !important;

    &:hover {
      background: linear-gradient(135deg, rgba(255, 0, 102, 0.3), rgba(255, 0, 204, 0.3)) !important;
      box-shadow: 0 0 15px rgba(255, 0, 102, 0.4) !important;
      transform: translateY(-2px);
    }
  }

  &.export-btn {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.2), rgba(255, 102, 0, 0.2)) !important;
    border: 1px solid rgba(255, 204, 0, 0.5) !important;
    color: #ffcc00 !important;

    &:hover {
      background: linear-gradient(135deg, rgba(255, 204, 0, 0.3), rgba(255, 102, 0, 0.3)) !important;
      box-shadow: 0 0 15px rgba(255, 204, 0, 0.4) !important;
      transform: translateY(-2px);
    }
  }
}

// 表格区域 - 重点修改
.table-section {
  margin-bottom: 20px;
  width: 100%;
}

.history-table {
  background: rgba(20, 25, 45, 0.6) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 150, 255, 0.2) !important;
  backdrop-filter: blur(10px);
  width: 100% !important;

  ::v-deep .el-table__body-wrapper {
    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #00ffcc, #00ccff);
      border-radius: 3px;
    }
  }

  ::v-deep .el-table__empty-block {
    background: rgba(15, 20, 40, 0.8);
    width: 100% !important;
  }

  ::v-deep .el-table__empty-text {
    color: #8899bb;
    width: 100%;
  }

  // 确保表格单元格有足够的空间
  ::v-deep .el-table__body,
  ::v-deep .el-table__header {
    width: 100% !important;
  }

  ::v-deep .el-table__row {
    height: 60px;

    &:hover > td {
      background: rgba(0, 100, 255, 0.1) !important;
    }
  }
}

// 表格单元格样式 - 增强版
.id-cell {
  color: #00ffcc;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
  font-size: 14px;
}

.disease-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0;

  .disease-icon {
    color: #ffcc00;
    font-size: 16px;
  }

  .disease-name {
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
  }

  .disease-tag {
    margin-top: 4px;
  }
}

.confidence-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  .confidence-display {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;

    .confidence-bar {
      flex: 1;
      height: 6px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 3px;
      overflow: hidden;

      .confidence-fill {
        height: 100%;
        border-radius: 3px;
        transition: width 0.5s ease;

        &.confidence-high { background: linear-gradient(90deg, #00ff88, #00cc88); }
        &.confidence-medium { background: linear-gradient(90deg, #ffcc00, #ffaa00); }
        &.confidence-low { background: linear-gradient(90deg, #ff4444, #cc0000); }
      }
    }

    .confidence-value {
      color: #ffffff;
      font-weight: 600;
      font-size: 12px;
      min-width: 45px;
      text-align: right;
    }
  }

  .confidence-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    color: #ffffff;

    &.confidence-high {
      background: linear-gradient(135deg, #00ff66, #00cc66);
    }

    &.confidence-medium {
      background: linear-gradient(135deg, #ffcc00, #ff9900);
    }

    &.confidence-low {
      background: linear-gradient(135deg, #ff3366, #ff0066);
    }
  }
}

.detection-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .count-icon {
    color: #00ccff;
    font-size: 14px;
  }

  .count-value {
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
  }
}

.time-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  .time-main {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #aaccff;

    .time-icon {
      color: #00ccff;
    }

    span {
      font-size: 13px;
      font-weight: 500;
    }
  }

  .time-sub {
    color: #8899bb;
    font-size: 11px;
  }
}

.image-preview-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  .preview-wrapper {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    .image-container {
      position: relative;
      width: 60px;
      height: 60px;
      border-radius: 8px;
      overflow: hidden;
      border: 2px solid rgba(0, 255, 255, 0.3);
      transition: all 0.3s ease;

      &:hover {
        border-color: #00ffcc;
        box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
        transform: scale(1.05);

        .image-overlay {
          opacity: 1;
        }
      }
    }

    .table-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .image-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      color: #8899bb;
      font-size: 11px;

      i {
        font-size: 18px;
        margin-bottom: 2px;
      }
    }

    .image-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      color: #00ffcc;

      i {
        font-size: 16px;
        margin-bottom: 2px;
      }

      span {
        font-size: 10px;
      }
    }
  }

  .image-actions {
    .preview-btn {
      color: #00ccff !important;
      font-size: 11px !important;
      padding: 2px 6px !important;

      &:hover {
        color: #00ffcc !important;
        background: rgba(0, 255, 204, 0.1) !important;
      }
    }
  }
}

.detail-expand-btn {
  color: #00ccff !important;
  font-size: 12px !important;

  &:hover {
    color: #00ffcc !important;
    background: rgba(0, 255, 204, 0.1) !important;
  }
}

// 展开行样式
.expand-row {
  background: rgba(15, 20, 40, 0.8) !important;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2) !important;
}

.expand-content {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.expand-section {
  .expand-title {
    color: #00ffcc;
    font-size: 16px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;

    i {
      color: #00ccff;
    }
  }
}

.predictions-list {
  max-height: 200px;
  overflow-y: auto;

  .prediction-item {
    background: rgba(20, 25, 45, 0.6);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;

    .prediction-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;

      .prediction-class {
        color: #ffffff;
        font-weight: 500;
        font-size: 13px;
      }

      .prediction-confidence {
        color: #ffcc00;
        font-weight: 600;
        font-size: 12px;
        background: rgba(255, 204, 0, 0.1);
        padding: 2px 6px;
        border-radius: 3px;
      }
    }

    .prediction-bbox {
      font-size: 11px;
      color: #aaccff;

      .bbox-label {
        color: #8899bb;
      }

      .bbox-value {
        font-family: 'Courier New', monospace;
      }
    }
  }

  .no-predictions {
    text-align: center;
    color: #8899bb;
    font-style: italic;
    padding: 20px;
  }
}

.image-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;

  .comparison-item {
    .comparison-label {
      color: #ccddff;
      font-size: 13px;
      margin-bottom: 8px;
      text-align: center;
    }

    .image-container {
      cursor: pointer;
      border: 2px solid rgba(0, 255, 255, 0.3);
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.3s ease;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        border-color: #00ffcc;
        box-shadow: 0 0 15px rgba(0, 255, 204, 0.4);
      }

      .comparison-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .no-image {
        color: #8899bb;
        text-align: center;
        padding: 20px;
      }
    }
  }
}

.action-buttons {
  display: flex;
  gap: 6px;
  justify-content: center;

  .action-btn {
    border: none !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    min-height: auto !important;

    &.view-btn {
      background: linear-gradient(135deg, #00ccff, #0099ff) !important;
      color: white !important;

      &:hover {
        background: linear-gradient(135deg, #00ddff, #00aaff) !important;
        transform: translateY(-1px);
      }
    }

    &.edit-btn {
      background: linear-gradient(135deg, #00ff66, #00cc66) !important;
      color: white !important;

      &:hover {
        background: linear-gradient(135deg, #00ff77, #00dd77) !important;
        transform: translateY(-1px);
      }
    }

    &.delete-btn {
      background: linear-gradient(135deg, #ff3366, #ff0066) !important;
      color: white !important;

      &:hover {
        background: linear-gradient(135deg, #ff4477, #ff1177) !important;
        transform: translateY(-1px);
      }
    }
  }
}

// 分页样式
.pagination-section {
  display: flex;
  justify-content: center;
}

.history-pagination {
  ::v-deep .btn-prev,
  ::v-deep .btn-next,
  ::v-deep .number {
    background: rgba(20, 25, 45, 0.8) !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    color: #ccddff !important;
    margin: 0 4px;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;

    &:hover {
      border-color: #00ffcc !important;
      color: #00ffcc !important;
      box-shadow: 0 0 10px rgba(0, 255, 204, 0.3) !important;
    }
  }

  ::v-deep .active {
    background: linear-gradient(135deg, #00ffcc, #00ccff) !important;
    border-color: transparent !important;
    color: #0a0a0a !important;
    font-weight: 600 !important;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.5) !important;
  }
}

// 对话框样式（保持不变）
.history-dialog,
.detail-dialog,
.preview-dialog {
  ::v-deep .el-dialog {
    background:
      radial-gradient(ellipse at center, rgba(0, 40, 80, 0.4) 0%, transparent 70%),
      linear-gradient(135deg, rgba(10, 20, 40, 0.95) 0%, rgba(5, 15, 30, 0.98) 100%) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 255, 255, 0.2) !important;
    box-shadow:
      0 0 50px rgba(0, 100, 255, 0.4),
      inset 0 0 50px rgba(0, 50, 100, 0.2) !important;
    color: #ffffff !important;
    backdrop-filter: blur(20px);
  }

  ::v-deep .el-dialog__header {
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.9) 0%, rgba(15, 52, 96, 0.9) 100%) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px !important;
    border-bottom: 1px solid rgba(0, 255, 255, 0.2) !important;
  }

  ::v-deep .el-dialog__title {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    background: linear-gradient(135deg, #00ffcc, #00ccff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  ::v-deep .el-dialog__body {
    padding: 30px !important;
    color: #ccddff !important;
  }

  ::v-deep .el-dialog__headerbtn {
    top: 20px !important;
    right: 20px !important;

    .el-dialog__close {
      color: #00ffcc !important;
      font-size: 18px !important;

      &:hover {
        color: #ff0066 !important;
      }
    }
  }

  .dialog-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent, #00ffcc, #00ccff, transparent);
    animation: shimmer 3s infinite;
  }
}

// 动画定义
@keyframes shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes titleGlow {
  0%, 100% {
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.5),
    0 0 60px rgba(0, 255, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 40px rgba(0, 255, 255, 0.8),
    0 0 80px rgba(0, 255, 255, 0.5),
    0 0 100px rgba(0, 255, 255, 0.3);
  }
}

// 响应式调整
@media (max-width: 1200px) {
  .page-header .page-title {
    font-size: 28px;
  }

  .search-input {
    width: 200px !important;
  }

  .expand-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .history-container {
    padding: 15px;
  }

  .page-header {
    .header-content {
      padding: 30px 15px;
    }

    .page-title {
      font-size: 24px;
    }

    .page-subtitle {
      font-size: 14px;
    }
  }

  .action-buttons {
    flex-direction: column;
    gap: 4px;

    .action-btn {
      justify-content: center;
      font-size: 11px !important;
      padding: 4px 8px !important;
    }
  }

  .search-section {
    padding: 15px;

    .search-input {
      width: 100% !important;
    }
  }

  .image-comparison {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .page-header .page-title {
    font-size: 20px;
  }

  .action-section .el-col {
    width: 50%;
    margin-bottom: 10px;
  }

  .history-dialog,
  .detail-dialog {
    width: 95% !important;
    margin: 5% auto !important;
  }

  .expand-content {
    padding: 15px;
  }
}
</style>
